<template >
  <div class="marign_auto">
    <Head>
      <h1>我的钱包</h1>
    </Head>
    <div class="flas_xis">
      <div class="mingxi_mudaikuangdanji">
        <div class="border_left">
          <p>我的平驾币&nbsp;&nbsp;<van-icon name="question"/></p>
          <p>
            <span class="storng">{{userbag.accountBalance }}</span>
            &nbsp;&nbsp;枚
          </p>
        </div>
        <div>
          <div is-link @click="showPopup" class="bor_rder">使用明细</div>
        </div>
      </div>
      <div class="mingxi_mudaikuangdanji">
        <div class="border_left">
          <p>可用积分&nbsp;&nbsp;<van-icon name="question" /></p>
          <p>
            <span class="storng">{{ userbag.integration }}</span> &nbsp;&nbsp;分
          </p>
        </div>
        <div>
          <div is-link @click="showPopup" class="bor_rder">使用明细</div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      :style="{ height: '3.28rem', width: '4.5rem', fontSize: '.24rem' }">
      <div class="taichu_c">
        <p>使用说明</p>
        <div>
          <p>1.1平驾币＝1元</p>
          <p>2.平驾币可用于冲抵租车消费</p>
          <p>3.平驾币不可取现</p>
          <p>4.1积分=1元，每单最高可使用积分冲抵40%的租车费用  <van-button size="mini" type="primary" to="/wallet/info">使用明细</van-button></p>
        </div>
      </div></van-popup>
    <div class="recharge">
      <div class="nav_flas">充值额度</div>
      <ul class="jussd_s">
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="bianse(index)"
          :class="item.flass ? 'bor_bluck' : ''"
        >
          <p @click="getadd(item)">
            <span>{{ item.num }}</span>枚
          </p>
          <p class="last_ch">
            送<span>{{ item.somois }}</span>积分
          </p>
        </li>

        <li v-if="ifels" @click="qitas">
          <p><span>其他金额</span></p>
        </li>
        <li class="botm_sc" v-else>
          <input type="text"
          v-model="addmoney" />
        </li>
      </ul>
    </div>
    <div v-show="flsdd">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell clickable @click="radio = '1'" class="wei_x">
            <img src="../../assets/dingdanxinxi/weixin.jpg" alt="" />
            微信
            <template #right-icon>
              <van-radio name="1" icon-size=".32rem" />
            </template>
          </van-cell>
          <van-cell clickable @click="radio = '2'" class="wei_x">
            <img src="../../assets/dingdanxinxi/zhifubao.jpg" alt="" />
            支付宝
            <template #right-icon>
              <van-radio name="2" icon-size=".32rem" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <div class="wei_x">
        <div>
          <span>更多支付方式</span>
        </div>
        <van-icon name="play" class="xuan_zhuan" />
      </div>
    </div>
    <div
      :class="flsdd ? 'zhifu' : 'zhifus'"
      v-text="zhifus"
      @click="tijiao"
    ></div>
<!--    {{userbag}}-->

    <van-dialog v-model="dialogVisible" :show-cancel-button="true" :close-on-click-overlay="true" @cancel="cancel" @confirm="cancel">
        <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
          <vue-qr
                  :text="payResult.codeUrl"
                  :margin="0"
                  colorDark="green"
                  :logoSrc="require('@/assets/logo.png')"
                  colorLight="#fff"
                  :size="200">
          </vue-qr>
        </div>
    </van-dialog>

  </div>
</template>

<script>
  import vueQr from "vue-qr"
import Vue from "vue";
import { Toast } from "vant";
import Head from "../jingtai_/header";
import { bag, addmoney } from "../../request/userinfo/userinfo";
Vue.use(Toast);
export default {
  props: {},
  data() {
    return {
      show: false,
      radio: "1",
      dialogVisible:false,
      activeIcon: "./../../assets/weixin.png",
      inactiveIcon: "./../../assets/zhifubao.png",
      only: "",
      zhifus: "立即充值",
      flsdd: false,
      ifels: true,
      timer:'',
      payResult:'',
      addmoney:0,
      list: [
        {num: "500", somois: "50", flssdd: false, flass: false,},
        {num: "1000", somois: "100", flssdd: false, flass: false,},
        {num: "2000", somois: "200", flssdd: false, flass: false,},
        {num: "5000", somois: "1000", flssdd: false, flass: false,},
        {num: "10000", somois: "3000", flssdd: false, flass: false,},
      ],
      userbag: {},
    };
  },
  mounted() {
    bag().then((res) => {
      console.log(res);
      // this.$store.state.userbag = res.data.data;
      this.userbag = res;
    });
  },
  methods: {

    getadd(v){
      // console.log(v.num);
      this.addmoney = v.num;
    },

    cancel(){
      //消除定时器
      clearInterval(this.timer)
      this.timer=null;
      this.$message.success("挂起支付");
    },
    tijiao() {
      // this.dialogVisible = true
      console.log(this.radio)
      if (this.flsdd === true) {
        //消除定时器
        clearInterval(this.timer)
        this.timer=null;
        // Toast.loading({
        //   message: "模拟充值...",  size: "100px",   textSize: ".4rem",   forbidClick: true,
        //   loadingType: "spinner",   overlay: true,   closeOnClickOverlay: true,
        // });
          this.$http.get("/client/IntegrationHistory/web/createKryptonGold/" + this.addmoney + "/" + this.radio).then(resp => {
            this.payResult = resp.data.data;
            this.dialogVisible = true;
            //设置一个定时任务，每隔3秒调用一次
            this.timer = setInterval(() => {
              this.queryPayStatus(this.payResult.orderNo,this.radio)
            }, 9000);
          })
        }

    //   addmoney({
    //     amount: this.addmoney,
    //     clientId: 1,
    //     payId: 1,
    // }).then((res)=>{
    //   console.log(res)
    // }).then(()=>{
    //   bag({
    //   id: 1,
    // }).then((res) => {
    //   // console.log(res);
    //   this.$store.state.userbag = res.data;
    //   this.$router.push('/wallet')
    // });
    // });
    },

    //查询订单状态
    queryPayStatus(orderNo,status){
      this.$http.get("/client/IntegrationHistory/web/queryPayStatus/"+orderNo + "/" + status).then(resp=>{
        if(resp.data.code===200){
          //消除定时器
          clearInterval(this.timer)
          this.timer=null;
          this.$message.success("支付成功");
          this.dialogVisible=false;

        }else {
          this.$message.success(this.data.msg);
        }
      })
    },

    showPopup() {
      this.show = true;
    },

    bianse(v) {
      this.list.forEach((item) => {
        item.flass = false;
      });
      this.list[v].flass = true;
      this.flsdd = true;
      this.ifels = true;
    },
    qitas() {
      this.list.forEach((item) => {
        item.flass = false;
      });
      this.flsdd = true;
      this.ifels = false;
    },
  },
  components: {

  },
  components: {
    Head,vueQr
  },
};
</script>

<style scoped lang="less">
.marign_auto {
  font-size: 0.24rem;
  margin: 0 0.24rem;
}
.flas_xis {
  height: 4.44rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flas_xis > div:last-child {
  background-color: #f3966e;
  .bor_rder {
    background-color: #f08c29;
  }
}
.mingxi_mudaikuangdanji {
  width: 100%;
  background-color: #1885fe;
  height: 2rem;
  border-radius: 0.18rem;
  display: flex;
  justify-content: space-between;
  .border_left {
    margin-left: 0.48rem;
    color: white;
    & > p:last-child {
      margin-top: 0.1rem;
    }
    & > p {
      font-size: 0.24rem;
      & > .storng {
        font-size: 0.48rem;
      }
    }
  }
  & > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
  & > div > .bor_rder {
    color: white;
    font-size: 0.24rem;
    background-color: #0d5fd7;
    width: 1.32rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
  }
}
.recharge {
  font-size: 0.28rem;
  color: #000;
  .nav_flas {
    line-height: 0.86rem;
    height: 0.86rem;
  }
  .jussd_s {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    & > .bor_bluck {
      border-left: 2px solid #3d88f7;
      border-right: 2px solid #3d88f7;
      border-top: 2px solid #3d88f7;
      border-bottom: 2px solid #3d88f7;
    }
    & > li {
      box-sizing: border-box;
      width: 2.24rem;
      height: 0.99rem;
      border-radius: 0.06rem;
      background-color: #f2f2f2;
      border-top: 2px solid #fafafa;
      border-bottom: 2px solid #fafafa;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      margin-bottom: 0.09rem;
      & > .last_ch {
        margin-top: 0.1rem;
        font-size: 0.24rem;
        color: #333333;
      }
    }
  }
}
.taichu_c {
  color: #333333;
  margin: 0.38rem 0.3rem 0.3rem 0.3rem;
  & > p {
    font-size: 0.28rem;
  }
  & > div {
    margin-top: 0.24rem;
  }
  & > div > p {
    line-height: 0.38rem;
  }
}
.wei_x {
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.8rem;
  padding: 0;
  & > div {
    display: flex;
    align-items: center;
    & > img {
      margin-right: 0.29rem;
      width: 0.48rem;
      height: 0.48rem;
    }
  }
}

.xuan_zhuan {
  transform: rotateZ(90deg);
  width: 0.26rem;
  height: 0.26rem;
}
.zhifu {
  font-size: 0.36rem;
  border-radius: 0.08rem;
  background-color: #3d88f7;
  color: white;
  width: 5rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin: 0.35rem auto 0;
}

.zhifus {
  font-size: 0.36rem;
  border-radius: 0.08rem;
  background-color: #f2f2f2;
  color: #999999;
  width: 5rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin: 0.35rem auto 0;
}
.botm_sc {
  input {
    height: 100%;
    width: 100%;
    color: #0d5fd7;
    text-align: center;
    border: none;
    border: 2px solid #3d88f7;
    border-radius: 0.08rem;
  }
}
.van-loading__spinner--spinner {
  width: 1rem !important;
  height: 1rem !important;
}
.van-toast {
  width: 1rem;
  height: 1rem;
}
</style>
